<template>
	<view class="pay-success-page">
		<!-- 可滚动内容区域 -->
		<scroll-view class="scroll-container" scroll-y="true">
			
			<!-- 支付成功卡片 -->
			<view class="success-card">
				<!-- 成功图标 -->
				<view class="success-icon">
					<image src="/static/images/wgh/对 拷贝.png" class="icon-image" mode="aspectFit"></image>
				</view>
				
				<!-- 成功标题 -->
				<text class="success-title">支付成功</text>
				
				<!-- 支付金额 -->
				<text class="payment-amount">¥{{ totalPrice }}</text>
				
				<!-- 预约编号 -->
				<view class="order-info">
					<text class="order-label">预约编号: {{ orderNumber }}</text>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button class="home-btn" @click="goToHome">返回首页</button>
					<button class="detail-btn" @click="viewOrderDetail">订单详情</button>
				</view>
			</view>
			
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalPrice: '39.90',
				orderNumber: '324252536363634'
			}
		},
		onLoad(options) {
			// 接收从orderConfirm页面传递的价格参数
			if (options.totalPrice) {
				this.totalPrice = options.totalPrice;
			}
			this.loadOrderData();
		},
		methods: {
			loadOrderData() {
				// 如果没有通过URL参数传入价格，则从本地存储计算
				if (this.totalPrice === '39.90') {
					const storeData = uni.getStorageSync('selectedStoreDetail');
					const servicesData = uni.getStorageSync('selectedServicesData');
					
					if (servicesData && servicesData.services && servicesData.selectedServices) {
						let total = 0;
						servicesData.selectedServices.forEach(index => {
							total += parseFloat(servicesData.services[index].price);
						});
						this.totalPrice = total.toFixed(1);
					}
				}
				
				// 生成随机订单号
				this.orderNumber = this.generateOrderNumber();
			},
			
			generateOrderNumber() {
				// 生成随机订单号
				const timestamp = Date.now().toString();
				const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
				return timestamp + random;
			},
			
			goToHome() {
				// 返回首页
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			
			viewOrderDetail() {
				// 跳转到订单详情页面
				uni.navigateTo({
					url: `/pages/carMaintenance/orderDetail/orderDetail?totalPrice=${this.totalPrice}&orderNumber=${this.orderNumber}`
				});
			}
		}
	}
</script>

<style scoped>
	.pay-success-page {
		background-color: #f5f5f5;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: linear-gradient(to bottom, #3486FD 0%, #3486FD 100rpx, #0A64E7 350rpx, #f5f5f5 120rpx);
		background-repeat: no-repeat;
		background-attachment: fixed;
		width: 100%;
		box-sizing: border-box;
	}

	.scroll-container {
		flex: 1;
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.success-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 60rpx 40rpx;
		margin-top: 100rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.success-icon {
		margin-bottom: 40rpx;
	}

	.icon-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.success-title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.payment-amount {
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 40rpx;
		display: block;
	}

	.order-info {
		display: flex;
		justify-content: center;
		margin-bottom: 60rpx;
	}

	.order-label {
		font-size: 28rpx;
		color: #666;
		display: block;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		width: 100%;
	}

	.home-btn {
		background: linear-gradient(135deg, #2b79f5 0%, #1e5bb8 100%);
		color: #fff;
		border-radius: 80rpx;
		font-size: 32rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		border: none;
		padding: 0 60rpx;
		min-width: 400rpx;
	}

	.detail-btn {
		background-color: #f0f0f0;
		color: #333;
		border-radius: 80rpx;
		font-size: 32rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		border: none;
		padding: 0 60rpx;
		min-width: 400rpx;
	}
</style>
